/**
 * 商品瀑布流预览
 */
Vue.component('shop-list-text', {
    template: `<div :id="id" :style="style">
        <div :style="column(i)" v-for="(article,i) in Data" :key="i">
            <div :style="styleItem" v-for="(item,index) in article" :key="index">
                <el-image style="width: 100%;" fit="contain" :src="BASE_IMG + item.Picture_URL"></el-image>
                <div :style="styleText">
                    <span style="font-size: 16px; color: #000;">{{item.Article_Name}}</span>
                    <span style="font-size: 12px; color: rgb(127, 127, 127); margin: 5px 0;">今日剩余{{item.Stock_Remain}}</span>
                    <span style="color:rgb(247, 48, 0); font-weight: 700;">
                        <span style="font-size: 12px;">￥</span><span style="font-size: 16px;">{{item.Sales_Unit_Price}}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>`,
    mixins: [global],
    data() {
        return {
            article: [],
        }
    },
    store,
    computed: {
        Data() {
            let arr = [[], []]
            this.article.forEach((item, index) => {
                if ((index + 1) % 2 != 0) {
                    arr[0].push(item);
                } else {
                    arr[1].push(item);
                }
            })
            return arr;
        },
        style(){
            const {top,right,bottom,left,backgroundColor,paddingTop,paddingLeft,paddingBottom,paddingRight} = this.data;
            return {
                display:'flex',
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                backgroundColor,
            }
        },
        column(){
            const {CardCount} = this.data;
            return function (index){
                return {
                    marginRight:index%2==0?(CardCount+'px'):'',
                    width:'100%'
                }
            }
        },
        styleItem(){
            const {CardBackgroundColor,CardborderRadius,CardCount} = this.data;
            return {
                width:'100%',
                backgroundColor:CardBackgroundColor,
                borderRadius:CardborderRadius +'px',
                marginBottom:CardCount +'px',
                overflow:'hidden'
            }
        },
        styleText(){
            const {TextTop,TextLeft,TextBottom,TextRight} = this.data;
            return {
                display:'flex',
                flexDirection: 'column',
                margin: `${TextTop}px ${TextRight}px ${TextBottom}px ${TextLeft}px`,
            }
        },
        'data.Activity_SerialNumber'(val){
            this.getData(val)
        }
    },
    methods: {
        getData(SQLSerialNumber) {
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber,
                    Condition: "",
                    ExtensionCondition: ''
                },
                success: function (data) {
                    console.log(data);
                    that.article = data
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            })
        }
    },
    mounted() {
        this.getData(this.data.Activity_SerialNumber);
    }
})
/**
 * 商品瀑布流配置
 */
Vue.component('shop-list-config', {
    template: `<div>
        <div class="table_titel">
            <div class="titel">组件属性({{id}})</div>
        </div>
        <el-descriptions :column="2" border size="small">          
            <el-descriptions-item label="上边距">
                <el-input-number v-model="data.top" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下边距">
                <el-input-number v-model="data.bottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左边距">
                <el-input-number v-model="data.left" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右边距">
                <el-input-number v-model="data.right" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="上内边距">
                <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下内边距">
                <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左内边距">
                <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右内边距">
                <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="背景颜色">
                <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">商品卡片</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="卡片颜色">
                <el-color-picker v-model="data.CardBackgroundColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="卡片弧度">
                <el-input-number v-model="data.CardborderRadius" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="卡片间距">
                <el-input-number v-model="data.CardCount" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="文字上边距">
                <el-input-number v-model="data.TextTop" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="文字左边距">
                <el-input-number v-model="data.TextLeft" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="文字下边距">
                <el-input-number v-model="data.TextBottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="文字右边距">
                <el-input-number v-model="data.TextRight" :min="0"></el-input-number>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">数据源配置</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="请选择数据源">
                <el-select filterable style="width:100%" v-model="data.Activity_SerialNumber" placeholder="请选择数据源">
                    <el-option v-for="(item,index) in activity" :key="item.index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
    </div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            activeNames: [1],
            activity: [{
                value:'M_business_daily_execute_unitprice',
                label:'查询已上架商品信息'
            }],
            page: [],
        }
    },
    methods: {
        getData() {
            const that = this;
            // $.ajax({
            //     headers: requestHeaders(),
            //     url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
            //     type: 'POST',
            //     data: {
            //         Data: "business_activity",
            //         Condition: "Row_Status <> '1'"
            //     },
            //     success: function (data) {
            //         that.activity = data;
            //     },
            //     complete: function (XMLHttpRequest) {
            //         that.loading = false
            //         requestPretreatment(XMLHttpRequest);
            //     },
            //     dataType: "json"
            // });
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data: {
                    Data: "base_page_info",
                    Condition: "Row_Status = '0' and Absolute_Path <> ''"
                },
                success: function (data) {
                    that.page = data;
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            })
        },
    },
    mounted() {
        this.getData();
    }
})
/**
 * 分类组件预览
 */
Vue.component('classify-text', {
    template: `<div :style="style">
        <div style="display: flex; align-items: center;">
            <div @click="handle(i,id)" :style="activeStyle(id)" v-for="(i,id) in Data" :key="id">{{i.Classify_Name}}</div>
        </div>
    </div>`,
    mixins: [global],
    store,
    data() {
        return {
            Data: [],
            active:0,
        }
    },
    computed:{
        style(){
            const {top,right,bottom,left,paddingTop,paddingRight,paddingBottom,paddingLeft,
                borderRadius,backgroundColor} = this.data;
            return {
                display:'flex',
                overflow:'auto',
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                backgroundColor,
                borderRadius:borderRadius+'px'
            }
        },
        activeStyle(){
            const {ItemTop,ItemRight,ItemBottom,fontSize,selectedfontSize,fontWeight,
                selectedfontWeight,ItemLeft,ItemborderBottomWidth,ItemborderBottomColor,
                ItemColor,selectedColor} = this.data;
            return function (index){
                let obj = this.active == index? {
                    borderBottom:`${ItemborderBottomWidth}px solid ${ItemborderBottomColor}`,
                    color:selectedColor,
                    fontWeight:selectedfontWeight,
                    fontSize:selectedfontSize+'px'
                }:{
                    color:ItemColor,
                    fontWeight,
                    fontSize:fontSize+'px',
                }
                return {
                    flexShrink: 0,
                    margin:`${ItemTop}px ${ItemRight}px ${ItemBottom}px ${ItemLeft}px`,
                    ...obj,
                    
                }
            }
        },
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyByTableName`,
                type: 'GET',
                data: {
                    TableName: "business_classify",
                    Condition: "Row_Status='0' AND Level='1'",
                },
                success: function (Classify) {
                    that.Data = [{Classify_SerialNumber:'',Classify_Name:'全部'},...Classify]
                },
                dataType: "json"
            })
        },
        handle(item,id) {
            this.active = id;
            if (this.data.value) {
                let obj = { ...this.$store.state.transfer }
                obj[this.data.value] = item.Classify_SerialNumber
                this.$store.commit('setTransfer', obj)
            }
        }
    },
    mounted(){
        this.getData()
    }
})
/**
 * 分类组件配置
 */
Vue.component('classify-config', {
    template: `<div>
        <div class="table_titel">
            <div class="titel">组件属性({{id}})</div>
        </div>
        <el-descriptions :column="2" border size="small">        
            <el-descriptions-item label="上边距">
                <el-input-number v-model="data.top" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下边距">
                <el-input-number v-model="data.bottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左边距">
                <el-input-number v-model="data.left" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右边距">
                <el-input-number v-model="data.right" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="上内边距">
                <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下内边距">
                <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左内边距">
                <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右内边距">
                <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="背景颜色">
                <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="弧度">
                <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">选项属性</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="上边距">
                <el-input-number type="number" v-model="data.ItemTop" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下边距">
                <el-input-number v-model="data.ItemBottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左边距">
                <el-input-number v-model="data.ItemLeft" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右边距">
                <el-input-number v-model="data.ItemRight" :min="0" ></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="选中下划线粗细">
                <el-input-number v-model="data.ItemborderBottomWidth" :min="0" ></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="选中下划线颜色">
                <el-color-picker v-model="data.selectedColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="选中字体粗细">
                <el-input-number v-model="data.selectedfontWeight" :min="100" :step="100" step-strictly></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="选中字体大小">
                <el-input-number v-model="data.selectedfontSize" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="默认字体粗细">
                <el-input-number v-model="data.fontWeight" :min="100" :step="100" step-strictly></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="默认字体大小">
                <el-input-number v-model="data.fontSize" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="默认字体颜色">
                <el-color-picker v-model="data.ItemColor" show-alpha></el-color-picker>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">属性配置</div>
        </div>
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="关联组件">
                <el-select style="width:100%" v-model="data.value" placeholder="请选择关联组件">
                    <el-option v-for="item in Components" :key="item.id" :label="item.title+'('+item.id+')'" :value="item.id"></el-option>
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
    </div>`,
    mixins: [globalConfig],
    computed: {
        Components() {
            return this.$store.state.Components.filter(i => i.id != this.id)
        }
    },
    // watch: {
    //     'data.value'(id) {
    //         if (id!='') {
    //             this.$store.commit('setTransfer', { type: '0', id, value:this.id })
    //         }
    //     }
    // },
    methods: {

    }
})
/**
 * 列表组件预览
 */
Vue.component('card-list-text',{
    template:`<div :style="style">
    <div @click="handle(item)" v-for="(item,index) in data.list" :style="Itemstyle">
        <span :style="TextStyle">{{item.title}}</span>
        <i v-if="data.isIcon" class="el-icon-arrow-right"></i>
    </div></div>`,
    mixins: [global],
    computed: {
        style(){
            const { top,right,bottom,left,paddingTop,backgroundColor,paddingRight,paddingBottom,paddingLeft,
                borderRadius } = this.data;
            return {
                display:'flex',
                flexDirection:'column',
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                backgroundColor,
                borderRadius:borderRadius + 'px'
            }
        },
        Itemstyle(){
            const {ItemTop,ItemBottom,ItemLeft,ItemRight,ItempaddingTop,ItempaddingLeft,ItempaddingRight,ItempaddingBottom} = this.data;
            return {
                display:'flex',
                margin:`${ItemTop}px ${ItemRight}px ${ItemBottom}px ${ItemLeft}px`,
                padding: `${ItempaddingTop}px ${ItempaddingRight}px ${ItempaddingBottom}px ${ItempaddingLeft}px`,
                justifyContent: 'space-between',
                alignItems:'center',
            }
        },
        TextStyle(){
            const { fontSize,fontWeight,color} = this.data;
            return {
                fontSize:fontSize+'px',
                color,
                fontWeight
            }
        }
    },
    methods:{
        handle(item){
            if (item.type == 'web') {
                window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
            } else if (item.type = 'wx') {
                wx.miniProgram.navigateTo({
                    url: item.url,
                })
            }
        }
    }
})
/**
 * 列表组件配置
 */
Vue.component('card-list-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">组件属性({{id}})</div>
    </div>
    <el-descriptions :column="2" border size="small">        
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上内边距">
            <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下内边距">
            <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左内边距">
            <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右内边距">
            <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="弧度">
            <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图标显示">
            <el-switch v-model="data.isIcon" active-text="是" inactive-text="否"></el-switch>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">列表属性</div>
    </div>
    <el-descriptions :column="2" border size="small">        
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.ItemTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.ItemBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.ItemLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.ItemRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上内边距">
            <el-input-number v-model="data.ItempaddingTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下内边距">
            <el-input-number v-model="data.ItempaddingBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左内边距">
            <el-input-number v-model="data.ItempaddingLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右内边距">
            <el-input-number v-model="data.ItempaddingRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.fontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.fontWeight" :min="100" :step="100" step-strictly></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图标显示">
            <el-switch v-model="data.isIcon" active-text="是" inactive-text="否"></el-switch>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">添加列表</div>
        <div class="operation">
            <el-button type="text" size="small" @click="add">新增</el-button>
            <el-button type="text" size="small" @click="remove">删除</el-button>
        </div>
    </div>
    <el-descriptions :column="1" v-for="(item,index) in data.list" :key="index" border size="small">
        <el-descriptions-item label="名称">
            <el-input v-model="item.title" placeholder="请选择名称"></el-input>
        </el-descriptions-item>     
        <el-descriptions-item label="跳转类型">
            <el-select style="width:100%" v-model="item.type" placeholder="请选择跳转类型">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="跳转页面">
            <el-select style="width:100%" v-model="item.url" placeholder="请选择跳转页面">
                <el-option v-for="item in url" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            type:[{
                label:'微信页面',
                value:'wx',
            }],
            url:[{
                label:'商品筛选页',
                value:'/pages/index/searchGoods',
            },{
                label:'身份绑定页',
                value:'/pages/index/login',
            }]
        }
    },
    methods: {
        add() {
            this.data.list.push({
                title:'',
                type:'wx',
                url:'/pages/index/login',
            })
        },
        remove() {
            if (this.data.list.length > 1) {
                this.data.list.pop();
            } else {
                this.$message({
                    message: "不能再删除了",
                    type: 'warning'
                })
            }
        }
    },
})
/**
 * 轮播图组件预览
 */
Vue.component('swiper-text', {
    template: `<div ref="carousel" :autoplay="autoplay" :id="id" :style="style">
    <el-carousel :style="ItemStyle" :interval="interval" :type="data.type" 
        :height="height" :arrow="data.arrow" :direction="data.direction" :trigger="data.trigger">
        <el-carousel-item @click="handle(item)" v-for="(item,index) in data.Children.image" :key="index">
            <el-image style="width: 100%;height: 100%;" :src="BASE_IMG + item.Picture_URL" :fit="item.fit"></el-image>
        </el-carousel-item>
    </el-carousel>
    </div>`,
    mixins: [global],
    computed: {
        interval() {
            return this.data.times * 1000
        },
        style(){
            const {top,right,bottom,left } = this.data;
            return {
                padding:`${top}px ${right}px ${bottom}px ${left}px`
            }
        },
        ItemStyle(){
            const {radius} = this.data;
            return {
                overflow:'hidden',
                borderRadius:radius+'px',
            }
        },
        height(){
            return this.data.height + 'px'
        },
    },
    data(){
        return {
            autoplay:true,
        }
    },  
    methods:{
        handle(item){
            if (item.type == 'web') {
                window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
            } else if (item.type = 'wx') {
                wx.miniProgram.navigateTo({
                    url: item.url,
                })
            }
        },
        stopAuto() {
            this.autoplay = false
        },
        startAuto() {
            this.autoplay = true
        },
        slideBanner() {
            const that = this
            //选中item的盒子
            var box = document.querySelector('.el-carousel__container')
            console.log(box);
            //手指起点X坐标
            var startPoint = 0
            //手指滑动重点X坐标
            var stopPoint = 0
 
            //重置坐标
            var resetPoint = function () {
                startPoint = 0
                stopPoint = 0
            }
 
            //手指按下
            box.addEventListener('touchstart', function (e) {
                //手指按下的时候停止自动轮播
                that.stopAuto()
                //手指点击位置的X坐标
                startPoint = e.changedTouches[0].pageX
            })
            //手指滑动
            box.addEventListener('touchmove', function (e) {
                //手指滑动后终点位置X的坐标
                stopPoint = e.changedTouches[0].pageX
            })
            //当手指抬起的时候，判断图片滚动离左右的距离
            box.addEventListener('touchend', function () {
                if (stopPoint == 0 || startPoint - stopPoint == 0) {
                    resetPoint()
                    that.startAuto()
                    return
                }
                if (startPoint - stopPoint > 0) {
                    resetPoint()
                    that.$refs.carousel.next()
                    that.startAuto()
                    return
                }
                if (startPoint - stopPoint < 0) {
                    resetPoint()
                    that.$refs.carousel.prev()
                    that.startAuto()
                    return
                }
            })
        }
    },
    mounted(){
        this.slideBanner();
    }
})
/**
 * 轮播图组件配置
 */
Vue.component('swiper-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">轮播图组件</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="切换箭头显示">
            <el-select filterable v-model="data.arrow" placeholder="请选择">
                <el-option v-for="(item,index) in arrow" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="轮播间隔（秒）">
            <el-input-number v-model="data.times" :min="1" placeholder="请输入轮播秒数"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件类型">
            <el-radio v-model="data.type" label="">正常</el-radio>
            <el-radio v-model="data.type" label="card">卡片化</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="方向">
            <el-radio v-model="data.direction" label="horizontal">水平</el-radio>
            <el-radio v-model="data.direction" label="vertical">垂直</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="指示器触发">
            <el-radio v-model="data.trigger" label="click">点击指示器</el-radio>
            <el-radio v-model="data.trigger" label="hover">鼠标移入</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="圆角弧度">
            <el-input-number v-model="data.radius" :min="0" placeholder="请输入圆角弧度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" placeholder="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" placeholder="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" placeholder="请输入下边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件高度">
            <el-input-number v-model="data.height" :min="1" placeholder="请输入组件高度"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">轮播图配置</div>
        <div class="operation">
            <el-button type="text" size="small" @click="add">新增</el-button>
            <el-button type="text" size="small" @click="remove">删除</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small" v-for="(item,index) in data.Children.image" :key="index">
        <el-descriptions-item label="轮播图片">
            <yl-upload v-model="item.Picture_URL" :base="BASE_IMG"></yl-upload>
        </el-descriptions-item>
        <el-descriptions-item label="图片展示类型">
            <el-select style="width:100%" v-model="item.fit" placeholder="图片展示类型">
                <el-option v-for="item in fit" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="跳转类型">
            <el-select style="width:100%" v-model="item.type" placeholder="请选择跳转类型">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="跳转页面">
            <el-select style="width:100%" v-model="item.url" placeholder="请选择跳转页面">
                <el-option v-for="item in url" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            arrow: [{
                label: '一直显示',
                value: 'always',
            }, {
                label: '鼠标移入',
                value: 'hover',
            }, {
                label: '一直隐藏',
                value: 'never',
            }],
            type:[{
                label:'微信页面',
                value:'wx',
            }],
            url:[{
                label:'商品筛选页',
                value:'/pages/index/searchGoods',
            },{
                label:'身份绑定页',
                value:'/pages/index/login',
            }]
        }
    },
    methods: {
        add() {
            this.data.Children.image.push({
                Picture_URL: '',
                fit: 'contain',
                url:'',
                type:'',
            })
        },
        remove() {
            if (this.data.Children.image.length > 1) {
                this.data.Children.image.pop();
            } else {
                this.$message({
                    message: "不能再删除了",
                    type: 'warning'
                })
            }
        }
    },
})
/**
 * 搜索框预览
 */
Vue.component('search-text', {
    template: `<div :id="id" :style="style">
        <el-input :disabled="disabled" :placeholder="data.placeholder" prefix-icon="el-icon-search" v-model="data.value"></el-input>
        <div v-if="isbutton" :style="searchStyle">{{data.searchValue}}</div>
        <div v-if="disabled" @click="handle(click)" style="width:100%;height:100%;position: absolute;top:0;left:0; z-index:1;"></div>
    </div>`,
    mixins: [global],
    data(){
        return {
        }
    },
    computed: {
        style(){
            const {top,right,bottom,left,paddingTop,paddingRight,paddingBottom,paddingLeft,backgroundColor,borderRadius } = this.data
            return {
                display:'flex',
                overflow: 'hidden',
                position: 'relative',
                backgroundColor,
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                borderRadius:borderRadius+'px',
            }
        },
        searchStyle(){
            const {searchWidth,buttonRadius,buttonColor,color,distance} = this.data;
            return {
                flexShrink: 0,
                display: 'flex', 
                cursor: 'pointer', 
                alignItems: 'center',
                padding:`0 ${searchWidth}px`,
                borderRadius:buttonRadius+'px',
                backgroundColor:buttonColor,
                color,
                marginLeft:distance+'px',
            }
        },
        isbutton() {
            return this.data.isbutton
        },
        disabled() {
            return this.data.disabled;
        },
        click() {
            return this.data.click;
        }
    },
    methods: {
        handle(item) {
            if (this.disabled) {
                if (item.type == 'web') {
                    window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
                } else if (item.type = 'wx') {
                    wx.miniProgram.navigateTo({
                        url: item.url,
                    })
                }
            }
        }
    }
})
/**
 * 搜索框配置
 */
Vue.component('search-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">组件属性</div>
        <el-button @click="()=>{  console.log(JSON.stringify(this.data));}">获取json</el-button>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左内边距">
            <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右内边距">
            <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上内边距">
            <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下内边距">
            <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="搜索框弧度">
            <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="按钮弧度">
            <el-input-number v-model="data.buttonRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="搜索框背景颜色">
            <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="按钮背景颜色">
            <el-color-picker v-model="data.buttonColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="按钮字体颜色">
            <el-color-picker v-model="data.color" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="按钮内边距">
            <el-input-number v-model="data.searchWidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="与按钮间距">
            <el-input-number v-model="data.distance" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="提示文字">
            <el-input v-model="data.placeholder" placeholder="请输入提示文字"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="按钮文字">
            <el-input-number v-model="data.searchValue" :min="0" placeholder="请输入按钮文字"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="是否显示按钮">
            <el-switch v-model="data.isbutton" active-text="是" inactive-text="否"></el-switch>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">属性配置</div>
    </div>
    <el-descriptions :column="1" border size="small">
        <el-descriptions-item label="跳转类型">
            <el-select style="width:100%" v-model="data.click.type" placeholder="请选择跳转类型">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="跳转页面">
            <el-select style="width:100%" v-model="data.click.url" placeholder="请选择跳转页面">
                <el-option v-for="item in url" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            type:[{
                label:'微信页面',
                value:'wx',
            }],
            url:[{
                label:'搜索页',
                value:'/pages/index/search',
            }]
        }
    },
    methods: {
       
    },
})
/**
 * 选项框预览
 */
Vue.component('option-text', {
    template: `<div :style="style">
        <div @click="handle(item)" v-for="(item,index) in data.list" :key="index" :style="style1">
            <div style="position:relative">
                <el-image :style="iconStyle" :src="BASE_IMG + item.src"></el-image>
                <i v-if="item.title=='待付款' && shopNum > 0" :style="toolStyle" >{{ shopNum }}</i>
                <i v-if="item.title=='待发货' && shopNum1 > 0" :style="toolStyle" >{{ shopNum1 }}</i>
                <i v-if="item.title=='待收货' && shopNum2 > 0" :style="toolStyle" >{{ shopNum2 }}</i>
            </div>
            <div :style="textStyle">{{item.title}}</div>
        </div>
    </div>`,
    mixins: [global],
    data(){
        return {
            loading:false,
            shopNum:0,
            shopNum1:0,
            shopNum2:0,
            timer:null,
        }
    },
    computed: {
        style(){
            const {backgroundColor,borderRadius,top,bottom,left,right,paddingTop,paddingRight,
                paddingBottom,paddingLeft} = this.data;
            return {
                display: 'flex',
                flexWrap: 'wrap',
                backgroundColor,
                borderRadius:borderRadius+'px',
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
            }
        },
        style1(){
            const {column,ItemBottom} = this.data
            return {
                width: `${100 / column}%`,
                marginBottom:ItemBottom+'px',
                display: 'flex',
                flexDirection:'column',
                alignItems: 'center',
                position:'relative'
            }
        },
        iconStyle(){
            const {iconWidth,iconHeight} = this.data
            return {
                width: iconWidth + 'px',
                height: iconHeight + 'px',
            }
        },
        textStyle(){
            const { fontSize,fontWeight,color,lineHeight } = this.data;
            return {
                fontSize:fontSize+'px',
                fontWeight,
                color,
                lineHeight:lineHeight+'px'
            }
        },
        toolStyle(){
            return {
                fontStyle:'normal',
                zIndex:1,
                position: 'absolute',
                backgroundColor:'#dc3545',
                fontSize: '12px',
                color: '#fff',
                borderRadius:'50px',
                padding: '0 5px',
                top: '-2.5px',
                right: '-2.5px'
            }
        },
    },
    methods: {
        handle(item) {
            if (!this.loading) {
                this.loading = true;
                if (item.type == 'web') {
                    this.loading = false;
                    window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
                } else if (item.type = 'wx') {
                    wx.miniProgram.navigateTo({
                        url: item.url,
                        complete:()=>{
                            this.loading = false;
                        }
                    })
                }
            }
        },
        getData(Open_ID){
            const that = this;
            this.timer = setInterval(()=>{
                $.ajax({
                    url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                    type: 'POST',
                    data: {
                        SQLSerialNumber: "M_business_sales_order_Quantity",
                        Condition: window.btoa(unescape(encodeURIComponent(Open_ID+","+Open_ID+","+Open_ID))),
                        ExtensionCondition: ''
                    },
                    success: function (data) {
                        if (data.length==3) {
                            that.shopNum = data[0].Quantity
                            that.shopNum1 = data[1].Quantity
                            that.shopNum2 = data[2].Quantity
                        }
                    },
                    dataType: "json"
                })
            },1000)
        }
    },
    mounted(){
        this.getData(getQueryObject().Open_ID);
    }
})
/**
 * 选项框配置
 */
Vue.component('option-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">组件属性</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="列数">
            <el-input-number v-model="data.column" :min="1"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上内边距">
            <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下内边距">
            <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左内边距">
            <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右内边距">
            <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="弧度">
            <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图标宽度">
            <el-input-number v-model="data.iconWidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图标高度">
            <el-input-number v-model="data.iconHeight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.fontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.fontWeight" :min="100" :step="100" step-strictly></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体颜色">
            <el-color-picker v-model="data.color" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="字体间距">
            <el-input-number v-model="data.lineHeight" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">配置图标</div>
        <div class="operation">
            <el-button type="text" size="small" @click="add">新增</el-button>
            <el-button type="text" size="small" @click="remove">删除</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small" v-for="(item,index) in data.list" :key="index">
        <el-descriptions-item label="图标">
            <yl-upload v-model="item.src" :base="BASE_IMG"></yl-upload>
        </el-descriptions-item>
        <el-descriptions-item label="名称">
            <el-input v-model="item.title" placeholder="请输入名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="跳转类型">
            <el-select style="width:100%" v-model="item.type" placeholder="请选择跳转类型">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="跳转页面">
            <el-input v-model="item.url" placeholder="请输入跳转页面"></el-input>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            type:[{
                label:'微信页面',
                value:'wx',
            },{
                label:'低代码页面',
                value:'web',
            }],
            url:[{
                label:'',
                value:'/pages/my/myOrder',
            }]
        }
    },
    methods: {
        add() {
            this.data.list.push({
                src: '',
                title: '',
                type: 'wx',
                url: '/pages/index/searchGoods'
            })
        },
        remove() {
            if (this.data.list.length > 1) {
                this.data.list.pop();
            } else {
                this.$message({
                    message: '不能在删除了',
                    type: 'warning'
                })
            }
        }
    },
})
/**
 * 活动弹窗预览
 */
Vue.component('activity-pop-text', {
    template: `<div :id="id">
    <div id="popup" @click="handleClick" :style="style">
        <el-image v-if="data.backgroundImage" :style="styleImage" :src="BASE_IMG + data.backgroundImage"></el-image>
        <div :style="styleFont">{{data.title}}</div>
    </div>
    <div v-if="isShow" style="cursor: auto; z-index: 99; position: fixed; bottom: 0;left: 0;  width: 100%; height: 100%; background-color: #0000008c;">
        <div :style="style1" style="">
            <div @click="handleClick" style="font-size: 30px;position: absolute;right: 10px;top: 0; color: #8a8a8a;cursor: pointer;">×</div>
            <!-- 头部 -->
            <div style="height: 60px; display: flex; justify-content: center; align-items: center;">
                <div style="font-size: 16px; width: 80%; padding: 5px; background-color: rgb(249, 229, 205);border-radius: 5px;">
                    <i class="el-icon-coin" ></i>
                    <span style=" font-weight: 700;line-height: 30px;">剩余总积分:{{member.Cash_Point_Balance}}</span> 
                </div>
            </div>
            <div style="height: calc(100% - 60px);margin: 0 10px; overflow: auto;">
                <div style="display: flex;align-items: center; border-radius: 10px; background-color: #fff;padding: 10px 0; margin-bottom: 10px;"
                     v-for="(item,index) in activity" :key="index">
                    <div style="margin-left: 10px; width:70px;height:70px; border-radius: 50%;overflow: hidden;flex-shrink: 0;">
                        <el-image style="width:100%;height:100%;" :src="BASE_IMG+item.Picture_URL"></el-image>
                    </div>
                    <div style="margin-left: 10px; display:flex;flex-direction: column; width: 100%;">
                        <div style="font-size: 16px; font-weight: 700;">{{item.Activity_Name}}</div>
                        <div class="text-ellipsis-2" style="font-size: 14px; margin-top: 5px;">
                            {{item.Activity_Notice}}
                        </div>
                        <div style="font-size: 12px; margin-top: 5px; display:flex;">
                            <span style="font-weight: 700;color:red;">剩余</span><countdown update color="red" splitorColor="red" :day="getCountDown(item.End_Date).day" :hour="getCountDown(item.End_Date).h" :minute="getCountDown(item.End_Date).m" :second="getCountDown(item.End_Date).s"></countdown>
                        </div>
                    </div>
                    <div @click="handleSkip(item)" style="margin-left: 10px;flex-shrink: 0; background-color:rgb(253, 64, 89); margin-right: 10px; width:65px; height: 25px; border-radius: 50px; display: flex;align-items: center; justify-content: center;">
                        <span style="color: #fff;">前 往</span>
                    </div>
                </div>
            </div>
        </div>
    </div></div>`,
    mixins: [global],
    data() {
        return {
            isShow: false,
            activity: [],
            member:{Cash_Point_Balance:0},
            move:false
        }
    },
    computed: {
        style(){
            const {fiexdRight,fiexdbottom,buttonbackgroundColor,
                buttonborderRadius} = this.data;
            return{
                zIndex:98,
                cursor: 'pointer', 
                position: 'fixed', 
                right: fiexdRight +'px', 
                bottom: fiexdbottom +'%', 
                borderRadius: buttonborderRadius +'px',
                display: 'flex', 
                justifyContent: 'center', 
                alignItems: 'center', 
                flexDirection:'column',
                backgroundColor: buttonbackgroundColor,
                padding:'5px 5px 5px 5px',
            }
        },
        styleImage(){
            const {buttonImageBorderwidth,buttonImageBorderColor,buttonImagewidth,buttonImageheight,buttonImageRadius} = this.data;
            return {
                border:`${buttonImageBorderwidth}px solid ${buttonImageBorderColor}`,
                width:buttonImagewidth+'px',
                height:buttonImageheight+'px',
                borderRadius:buttonImageRadius+'px'
            }
        },
        styleFont(){
            const {buttonColor,buttonfontSize,buttonfontbgColor,buttonfonttop,buttonfontbottom,buttonfontleft,buttonfontright,
                buttonfontpaddingtop,buttonfontpaddingbottom,buttonfontpaddingleft,buttonfontpaddingright,
                buttonfontBorderwidth,buttonfontBorderColor,buttonfontBorderRadius,buttonfontWeight} = this.data;
            return {
                zIndex:'99',
                backgroundColor: buttonfontbgColor,
                padding: `${buttonfontpaddingtop}px ${buttonfontpaddingright}px ${buttonfontpaddingbottom}px ${buttonfontpaddingleft}px`,
                margin: `${buttonfonttop}px ${buttonfontright}px ${buttonfontbottom}px ${buttonfontleft}px`,
                fontSize: buttonfontSize + 'px', 
                fontWeight:buttonfontWeight,
                color:buttonColor,
                border:`${buttonfontBorderwidth}px solid ${buttonfontBorderColor}`,
                borderRadius:buttonfontBorderRadius+'px'
            }
        },
        style1(){
            const {height,borderRadius,backgroundColor} = this.data;
            return {
                position: 'absolute',
                bottom: 0,
                left: 0,
                overflow: 'hidden',
                width: '100%',
                height:height+'%',
                borderRadius:`${borderRadius}px ${borderRadius}px 0 0`,
                backgroundColor,
            }
        },
        
    },
    methods: {
        handleClick() {
            if (!this.move) {
                this.isShow = !this.isShow
            }
        },
        getData() {
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyByTableName`,
                type: 'GET',
                data: {
                    TableName:'business_member_account_info',
					Condition: "Open_ID='"+ getQueryObject().Open_ID +"'"
                },
                success: function (data) {
                    if (data.length==1) {
                        that.member = data[0];
                    }
                },
                dataType: "json"
            })
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber: "M_business_activity",
                    Condition: window.btoa(unescape(encodeURIComponent(getQueryObject().Open_ID))),
                    ExtensionCondition: ''
                },
                success: function (data) {
                    that.activity = data
                },
                dataType: "json"
            })
        },
        handleSkip(item) {
            window.location.href = BASE_URL4 + '/' + item.Page_SerialNumber
                + '.html?Open_ID=' + getQueryObject().Open_ID + '&Activity_SerialNumber=' + item.Activity_SerialNumber + '&Activity_Name=' + item.Activity_Name;
        },
        getMove(){
            const that = this;
            const popup = document.querySelector("#popup")
            popup.addEventListener('touchstart', function (e) {
                var x = e.touches[0].clientX - popup.offsetLeft;
                var y = e.touches[0].clientY - popup.offsetTop;
                popup.style.right = "";
                popup.style.left = e.touches[0].clientX - (x+1) + 'px';
                document.addEventListener('touchmove', move)
                function move(e) {
                    that.move = true;
                    popup.style.bottom = "";
                    popup.style.left = e.touches[0].clientX - x + 'px';
                    popup.style.top = e.touches[0].clientY - y + 'px';
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
                // 选项框取消移动
                popup.addEventListener('touchend', function () {
                    document.removeEventListener('touchmove', move);
                    const timer = setTimeout(()=>{
                        that.move = false;
                        clearTimeout(timer)
                    })
                })
            })
            popup.addEventListener('selectstart', function (e) {
                e.preventDefault();
            })
        }
    },
    mounted() {
        this.getData();
        this.getMove();
    }
})
/**
 * 活动弹窗配置
 */
Vue.component('activity-pop-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">组件属性({{id}})</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="弹窗高度">
            <el-input-number v-model="data.height" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="弹窗背景颜色">
        <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="弹窗弧度">
            <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="按钮靠右距离">
            <el-input-number v-model="data.fiexdRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="按钮靠底距离">
            <el-input-number v-model="data.fiexdbottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="按钮背景颜色">
            <el-color-picker v-model="data.buttonbackgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="按钮圆角">
            <el-input-number v-model="data.buttonborderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">按钮图片</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="背景图片">
            <yl-upload unslider :base="BASE_IMG" v-model="data.backgroundImage"></yl-upload>
        </el-descriptions-item>
        <el-descriptions-item label="图片圆角">
            <el-input-number v-model="data.buttonImageRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图片宽度">
            <el-input-number v-model="data.buttonImagewidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图片高度">
            <el-input-number v-model="data.buttonImageheight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图片边框">
            <el-input-number v-model="data.buttonImageBorderwidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="边框颜色">
            <el-color-picker v-model="data.buttonImageBorderColor" show-alpha></el-color-picker>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">按钮文字</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="按钮字体大小">
            <el-input-number v-model="data.buttonfontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.buttonfontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文字背景颜色">
            <el-color-picker v-model="data.buttonfontbgColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="文字颜色">
            <el-color-picker v-model="data.buttonColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.buttonfonttop"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.buttonfontbottom"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.buttonfontleft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.buttonfontright" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上内边距">
            <el-input-number v-model="data.buttonfontpaddingtop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下内边距">
            <el-input-number v-model="data.buttonfontpaddingbottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左内边距">
            <el-input-number v-model="data.buttonfontpaddingleft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右内边距">
            <el-input-number v-model="data.buttonfontpaddingright" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文字边框">
            <el-input-number v-model="data.buttonfontBorderwidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="边框颜色">
            <el-input-number v-model="data.buttonfontBorderColor" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文字标题">
            <el-input v-model="data.title" placeholder="可输入文字标题" ></el-input>
        </el-descriptions-item>
    </el-descriptions>
    
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
           
        }
    },
    methods: {

    },
})
/**
 * 商品组件预览
 */
Vue.component('shop-list1-text', {
    template: `<div :id="id" :style="style">
    <div @click="handle({...item,type:'wx'})" v-for="(item,index) in article" :key="index" :style="{backgroundColor:CardBackgroundColor,borderRadius:CardBorderRadius,margin:CardMargin}" style="display: flex;overflow: hidden;">
        <div :style="{margin:CardPadding}" style="margin: 10px; width:100%; display: flex;">
            <el-image fit="cover" style="width: 120px;height: 120px; flex-shrink: 0; border-radius: 10px;" :src="BASE_IMG+item.Picture_URL"></el-image>
            <div style="width: 100%;margin-left: 10px;display: flex; flex-direction: column;justify-content: space-between;">
                <div style="width:100% ;display: flex; flex-direction: column;">
                    <span class="text-ellipsis-2" style="font-size: 16px;font-weight: 700;">{{item.Article_Name}}</span>
                    <div style="display: flex;justify-content: space-between;">
                        <!--<span style="font-size: 12px; color: #999999;margin-top:5px; ">{{item.Brand_Name}}</span>-->
                        <!--<span style="font-size: 12px; color: red;margin-top:5px; ">{{item.Activity_Name?item.Activity_Name:''}}</span>-->
                    </div>  
                    <!-- <span style="font-size: 12px; color: #999999;margin-top:5px; ">{{item.Specifications_Name}}</span> -->
                </div>
                <div v-if="data.SQLSerialNumber == 'A_business_activity_article'">
                    <div style="display: flex;overflow:hidden;justify-content: space-between;border-radius:50px;background-color: rgb(254,243,241); position: relative;" >
                        <div style="display: flex; flex-direction: column;margin-left:15px;padding:5px 0;">
                            <span style="color:rgb(223,55,65);">
                                <span style="font-size: 12px;">￥</span><span style="font-size: 16px;">{{item.Sales_Unit_Price}}</span>
                            </span>
                            <span style="color: rgb(223,55,65);" style="font-size:12px">{{Discount(item)}}</span>
                        </div>
                        <div style="color:#fff; display: flex; align-items: center;position: absolute; top:-11px; right: 0; height: 150%; transform: rotate(15deg);background-color: rgb(223,55,65);">
                            <span style="padding:0 10px; font-size:13px; transform: rotate(-15deg);">立即购买</span> 
                        </div>
                    </div>
                </div>
                <div v-else style="width:100%; display: flex; justify-content: space-between; align-items: center;">
                    <span style="color:rgb(247, 48, 0); font-weight: 700;">
                        <span style="font-size: 12px;">￥</span><span style="font-size: 16px;">{{item.Sales_Unit_Price}}</span>
                    </span>
                    <div @click.stop="handler(item)" style="font-size: 20px; color: #fff; font-weight: 700; display: flex;align-items: center;justify-content: center;
                        border-radius: 50%; width: 35px; height: 35px; background-color:#F56C6C;">
                        <i class="el-icon-shopping-cart-1"></i>
                    </div>
                </div>
            </div>
        </div>
    </div></div>`,
    mixins: [global],//继承的方法
    data() {
        return {
            article: [],
            activity:[],
            form:{
                SQLSerialNumber:'',
                Classify_SerialNumber:'',
            },
            isShow:false,
        }
    },
    computed: {
        style(){
            const {marginTop,marginBottom,marginLeft,marginRight,paddingTop,paddingBottom,paddingRight,paddingLeft,backgroundColor} = this.data;
            return {
                margin:`${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
                padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                backgroundColor
            }
        },
        backgroundColor() {
            return this.data.backgroundColor
        },
        CardBackgroundColor() {
            return this.data.CardBackgroundColor
        },
        CardBorderRadius() {
            return this.data.CardBorderRadius + 'px'
        },
        CardMargin() {
            return `0 ${this.data.CardRight}px ${this.data.CardBottom}px ${this.data.CardLeft}px`
        },
        CardPadding() {
            return `${this.data.CardPaddingTop}px ${this.data.CardPaddingRight}px ${this.data.CardPaddingBottom}px ${this.data.CardPaddingLeft}px`;
        },
        Discount(){
            return function (item) {
                if (item.Cash_Point == '0') {
                    if (item.Deduction_Type == '0') {//上限
                        return "可使用最多"+item.Deduction_Limit+"积分"
                    }else{
                        return "可使用积分兑换商品"
                    }
                }else{
                    return "该商品暂时无法使用积分"
                } 
            }
        },
    },
    watch: {
        'data.SQLSerialNumber': function (val) {
            this.form.SQLSerialNumber = val;
            this.getData(this.form)
        },
        '$store.state.transfer':{
            handler(val, oldVal) {
                if (this.data.isSetTransfer && oldVal[this.id] != val[this.id]) {
                    this.form.Classify_SerialNumber = val[this.id]
                    this.getData(this.form);
                }
            },
            deep: true,
        }
    },
    methods: {
        getData(form) {
            const that = this;
            let Condition = '';
            let ExtensionCondition = '';
            let SQLSerialNumber = form.SQLSerialNumber;
            if (form.SQLSerialNumber == 'A_business_activity_article') {
                Condition = window.btoa(unescape("%%"));
                ExtensionCondition = " AND business_activity_article.Activity_SerialNumber='"+getQueryObject().Activity_SerialNumber+"'"
            } else if (form.SQLSerialNumber != 'A_business_activity_article'&&this.activity.length > 0){
                SQLSerialNumber = "A_business_activity_article"
                Condition = window.btoa(unescape("%%"));
                let str = "";
                this.activity.forEach(item=>{
                    if (str) {
                        str = str +  " OR business_activity_article.Activity_SerialNumber = '"+item.Activity_SerialNumber+"' " 
                    } else {
                        str = "business_activity_article.Activity_SerialNumber = '"+item.Activity_SerialNumber+"' " 
                    }
                })
                ExtensionCondition = " and ("+ str + ") ";
            }
            if (form.Classify_SerialNumber) {
                //判断当前登录用户有无活动
                ExtensionCondition = ExtensionCondition + " and business_article_classify.Classify_SerialNumber='"+form.Classify_SerialNumber+"' ";
            }
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber,
                    Condition,
                    ExtensionCondition:window.btoa(unescape(ExtensionCondition))
                },
                success: function (data) {
                    that.article = data
                },
                dataType: "json"
            })
        },
        handler(item){//加入到购物车
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyByTableName`,
                type: 'GET',
                data: {
                    TableName: 'business_shopping_trolley',
                    Condition: "Row_Status='0' and Open_ID='" + getQueryObject().Open_ID + "' and Supplier_Article_SerialNumber='" + item.Supplier_Article_SerialNumber + "' and Activity_SerialNumber='" + (item.Activity_SerialNumber?item.Activity_SerialNumber:'') + "'"
                },
                success: function (business_shopping_trolley) {
                    let obj = {};
                    if (business_shopping_trolley.length > 0) {
                        business_shopping_trolley[0].Quantity = parseInt(business_shopping_trolley[0].Quantity) + 1;
                        obj = {
                            Modify: {
                                business_shopping_trolley
                            }
                        }
                    } else {
                        obj = {
                            Add: {
                                business_shopping_trolley: [{
                                    Shopping_Trolley_Sales_Order_SerialNumber: '',
                                    Open_ID:getQueryObject().Open_ID,
                                    Supplier_Article_SerialNumber: item.Supplier_Article_SerialNumber,
                                    Quantity: 1,
                                    Activity_SerialNumber: item.Activity_SerialNumber?item.Activity_SerialNumber:'',
                                }]
                            }
                        }
                    }
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/salesOrder/addShoppingTrolley`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify(obj)
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.$showToast({
                                    title:'已加入购物车！'
                                })
                                if (that.data.shopCart) {
                                    let obj = { ...that.$store.state.transfer, }
                                    obj[that.data.shopCart] = that.$store.state.transfer[that.data.shopCart]?false:true,
                                    that.$store.commit('setTransfer', obj)
                                }
                            } else {
                                that.$showToast({
                                    title:'加入失败，请稍后再试'
                                })
                            }
                        },
                        error: function () {
                            that.$showToast({
                                title:'系统繁忙！'
                            })
                        },
                        complete: function (XMLHttpRequest) {
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                },
                dataType: "json"
            })
        },
        handle(item) {
            if (item.type == 'web') {
                window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
            } else if (item.type == 'wx') {
                let str = "";
                if (item.Activity_SerialNumber) {
                    str = "&Activity_SerialNumber=" + item.Activity_SerialNumber;
                }
                wx.miniProgram.navigateTo({
                    url: '/pages/index/detail?Supplier_Article_SerialNumber=' + item.Supplier_Article_SerialNumber + "&Article_Specifications_SerialNumber=" + item.Article_Specifications_SerialNumber + str,
                })
            }
        }
    },
    mounted() {
        this.form.SQLSerialNumber = this.data.SQLSerialNumber
        const that = this;
        $.ajax({
            url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
            type: 'POST',
            data: {
                SQLSerialNumber:'M_business_activity',
                Condition: window.btoa(unescape(getQueryObject().Open_ID)),
                ExtensionCondition:'',
            },
            success: function (data) {
                that.activity = data;
                that.getData(that.form,data);
            },
            dataType: "json"
        })
    }
})
/**
 * 商品组件配置
 */
Vue.component('shop-list1-config', {
    template: `<div>
        <div class="table_titel">
            <div class="titel">组件属性({{id}})</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="背景颜色">
                <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="上外边距">
                <el-input-number v-model="data.marginTop" :min="0" placeholder="请输入上外边距"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下外边距">
                <el-input-number v-model="data.marginBottom" :min="0" placeholder="请输入下外边距"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="上内边距">
                <el-input-number v-model="data.paddingTop" :min="0" placeholder="请输入上内边距"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下内边距">
                <el-input-number v-model="data.paddingBottom" :min="0" placeholder="请输入下内边距"></el-input-number>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">商品卡片</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="卡片颜色">
                <el-color-picker v-model="data.CardBackgroundColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="卡片弧度">
                <el-input-number v-model="data.CardBorderRadius" :min="0" placeholder="请输入卡片弧度"></el-input-number>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">属性配置</div>
        </div>
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="请选择数据源">
                <el-select filterable style="width:100%" v-model="data.SQLSerialNumber" placeholder="请选择数据源">
                    <el-option v-for="(item,index) in DataSource" :key="index" :label="item.Title":value="item.SQLSerialNumber"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="是否关联传参">
                <el-switch v-model="data.isSetTransfer" active-text="开启" inactive-text="关闭"></el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="购物车关联组件">
                <el-select v-model="data.shopCart" placeholder="请选择购物车关联组件">
                    <el-option v-for="item in Components" :key="item.id" :label="item.title+'('+item.id+')'" :value="item.id"></el-option>
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
    </div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            DataSource: [{
                Title: '日常上架',
                SQLSerialNumber: 'M_business_daily_execute_unitprice',
            }, {
                Title: '活动商品',
                SQLSerialNumber: 'A_business_activity_article',
            }],
            activity: [],
        }
    },
    computed:{
        Components() {
            return this.$store.state.Components.filter(i => i.id != this.id)
        }
    },
    methods: {
    },
    mounted() {
        // this.getData();
    }
})
/**
 * 品牌列表预览
 */
Vue.component('brand-text', {
    template:`<div :style="cardStyle">
    <el-carousel :height="carouselHeight" ref="brandCarousel" @change="change" :autoplay="false" arrow="never" indicator-position="none">
        <el-carousel-item :name="i" v-for="(arr,i) in newData" :key="i">
            <div style="display: flex; flex-wrap: wrap;">
                <div @click="handle(item)" v-for="(item,index) in arr" :key="index" :style="cardItemStyle">
                    <el-image :style="iconStyle" :fit="data.fit" :src="BASE_IMG + item.Picture_URL"></el-image>
                    <div :style="textStyle">{{item._Name}}</div>
                </div>
                <div v-if="data.type1=='1'" @click="handle1()" :style="cardItemStyle">
                    <el-image :style="iconStyle" :fit="data.fit" src="../../../admin/icons/gd.png"></el-image>
                    <div :style="textStyle">更多</div>
                </div>
            </div>
        </el-carousel-item>
    </el-carousel>
    <div v-if="newData.length>1" style="display:flex; justify-content: center;">
        <div @click="changeIndex(i)" v-for="(id,i) in newData.length" :key="i" :style="activeStyle(i)"></div>
    <div></div>`,
    mixins: [global],//继承的方法
    computed: {
        newData(){
            let column = this.data.column,row = this.data.row,is = (this.data.type1=='1')
            console.log(column*row-1);

            let page = 0, num = 0;
            let Data = [];
            if (is) {
                console.log(is);
                for (let i = 0; i < this.Data.length; i++) {
                    item = this.Data[i];
                    if (num==0) {
                        page++;
                        Data.push([])
                    }
                    Data[page-1].push(item),
                    num++
                    if (num== column*row-1) {
                       break;
                    }
                }
            }else{
                this.Data.forEach(item=>{
                    if (num==0) {
                        page++;
                        Data.push([])
                    }
                    Data[page-1].push(item),
                    num++
                    if (num== column*row) {
                        num = 0;
                    }
                })
            }
            return Data;
        },
        carouselHeight(){
            const {row,iconHeight,itemBottom,lineHeight} = this.data;
            return ((iconHeight + itemBottom + lineHeight)*row)+'px'
        },
        cardStyle(){
            const {backgroundColor,borderRadius,top,bottom,left,right,
                paddingTop,paddingBottom,paddingLeft,paddingRight,
                backgroundImage,backgroundSize,backgroundAttachment,backgroundRepeat} = this.data;
            let obj = {};
            if (backgroundImage) {
                obj = {
                    backgroundImage: `url(${BASE_IMG + backgroundImage})`,
                    backgroundSize:backgroundSize?backgroundSize:'auto',
                    backgroundRepeat
                }
            }
            if (backgroundAttachment) {
                obj.backgroundAttachment = 'fiexd'
            }
            return {
                display:'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                backgroundColor,
                borderRadius:borderRadius+'px',
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
                ...obj
            }
        },
        cardItemStyle(){
            const {column,itemBottom} = this.data;
            return {
                display:'flex', 
                flexDirection:'column', 
                alignItems:'center',
                width: `${100 / column}%`,
                marginBottom: itemBottom + 'px',
            }
        },
        textStyle(){
            const {fontSize,lineHeight,textColor,fontWeight} = this.data;
            return {
                fontSize:fontSize+'px',
                lineHeight:lineHeight +'px',
                height:lineHeight+'px',
                color:textColor,
                fontWeight,
            }
        },
        iconStyle(){
            const {iconWidth,iconHeight,iconRadius} = this.data;
            return {
                width:iconWidth+'px',
                height:iconHeight+'px',
                borderRadius:iconRadius+'px'
            }
        },
        activeStyle(){
            return function (index) {
                const {activeLeft,activeWidth,activeHeight,selectedActiveColor,activeColor,activeRadius} = this.data;
                return {
                    width:activeWidth + 'px',
                    height:activeHeight + 'px',
                    marginLeft:index == 0 ? '' : activeLeft + 'px',
                    backgroundColor: this.active == index?selectedActiveColor:activeColor,
                    borderRadius:activeRadius+'px',
                } 
            }
        },
    },
    data() {
        return {
            Data: [],
            active:0,
        }
    },
    watch:{
        'data.dataSource'(val){
            this.getData(val)
        }
    },
    methods: {
        change(e){//轮播图切换
            this.active = e 
        },
        changeIndex(i){//切换轮播图
            this.$refs.brandcarousel.setActiveItem(i);
        },
        getData(SQLSerialNumber) {
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber,
                    Condition:'',
                    ExtensionCondition:'',
                },
                success: function (data) {
                    console.log(data);
                    that.Data = data
                },
                dataType: "json"
            })
        },
        handle(item){
            let Key = "";
            if (this.data.dataSource=='DS_business_brand') {
                Key = "Brand_SerialNumber"
            } else if(this.data.dataSource=='DS_business_classify'){
                Key = "Classify_SerialNumber"
            }
            if (this.data.type == 'web') {
                window.location.href = BASE_URL4 + this.data.url + '?Open_ID=' + getQueryObject().Open_ID + "&"+Key+"="+item.SerialNumber;
            } else if (this.data.type == 'wx') {
                wx.miniProgram.navigateTo({
                    url: this.data.url + "?"+Key+"="+item.SerialNumber,
                })
            }
        },
        handle1(){
            wx.miniProgram.redirectTo({
                url: '/pages/index/classify'
            })
        },
        slideBanner() {
            var box = document.querySelector(".el-carousel__container");
            var startPointX = 0;
            var stopPointX = 0;
            var resetPoint = function() {
              startPointX = 0;
              stopPointX = 0;
            };
            box.addEventListener("touchstart", function(e) {
              startPointX = e.changedTouches[0].pageX;
            });
            box.addEventListener("touchmove", function(e) {
              stopPointX = e.changedTouches[0].pageX;
            });
            let that = this;
            box.addEventListener("touchend", function(e) {
              if (stopPointX == 0 || startPointX - stopPointX == 0) {
                resetPoint();
                return;
              }
              if (startPointX - stopPointX > 0) {
                resetPoint();
                that.$refs.brandCarousel.next();
                return;
              }
              if (startPointX - stopPointX < 0) {
                resetPoint();
                that.$refs.brandCarousel.prev();
                return;
              }
            });
        }
    },
    mounted() {
        this.slideBanner();
        this.getData(this.data.dataSource)
    }
})
/**
 * 品牌列表配置
 */
Vue.component('brand-config',{
    template:`<div :id="id">
        <div class="table_titel">
            <div class="titel">组件属性({{id}})</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="背景图片">
                <yl-upload unslider :base="BASE_IMG" v-model="data.backgroundImage"></yl-upload>
            </el-descriptions-item>
            <el-descriptions-item label="适应类型">
                <el-select style="width:100%" v-model="data.backgroundSize" clearable  placeholder="请选择适应类型">
                    <el-option v-for="item in backSize" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="是否固定">
                <el-switch v-model="data.backgroundAttachment" active-text="是" inactive-text="否"></el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="是否重复">
                <el-select style="width:100%" v-model="data.backgroundRepeat" clearable placeholder="请选择适应类型">
                    <el-option v-for="item in repeat" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="背景颜色">
                <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="圆角">
                <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="上边距">
                <el-input-number v-model="data.top" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下边距">
                <el-input-number v-model="data.bottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左边距">
                <el-input-number v-model="data.left" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右边距">
                <el-input-number v-model="data.right" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="上内边距">
                <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下内边距">
                <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左内边距">
                <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="右内边距">
                <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
            </el-descriptions-item>  
            <el-descriptions-item label="类型">
                <el-select style="width:100%" v-model="data.type1" placeholder="请选择类型">
                    <el-option label="默认" value="0"></el-option>
                    <el-option label="仅显示一页" value="1"></el-option>
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">元素属性</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="字体粗细">
                <el-input-number v-model="data.fontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="字体大小">
                <el-input-number v-model="data.fontSize" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="字体颜色">
                <el-color-picker v-model="data.textColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="列数">
                <el-input-number v-model="data.column"  :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="行数">
                <el-input-number v-model="data.row" :min="1" ></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="图标长度">
                <el-input-number v-model="data.iconWidth" :min="0" ></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="图标宽度">
                <el-input-number v-model="data.iconHeight" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="图标圆角">
                <el-input-number v-model="data.iconRadius" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="字体间距">
                <el-input-number v-model="data.lineHeight" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="元素间距">
                <el-input-number v-model="data.itemBottom" :min="1"></el-input-number>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">指示器属性</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="指示器间距">
                <el-input-number v-model="data.activeLeft" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="指示器宽度">
                <el-input-number v-model="data.activeWidth" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="指示器高度">
                <el-input-number v-model="data.activeHeight" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="指示器角度">
                <el-input-number v-model="data.activeRadius" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="指示器默认颜色">
                <el-color-picker v-model="data.activeColor" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="指示器选中颜色">
                <el-color-picker v-model="data.selectedActiveColor" show-alpha></el-color-picker>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">属性配置</div>
        </div>
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="数据源">
                <el-select style="width:100%" v-model="data.dataSource" placeholder="请选择数据源">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="跳转类型">
                <el-select style="width:100%" v-model="data.type" placeholder="请选择跳转类型">
                    <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="跳转页面">
                <el-select style="width:100%" v-model="data.url" placeholder="请选择跳转页面">
                    <el-option v-for="item in url" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
    </div>`,
    mixins: [globalConfig],//继承的方法
    data(){
        return {
            options:[{
                label:'查询品牌数据源',
                value:'DS_business_brand',
            },{
                label:'查询类别数据源',
                value:'DS_business_classify',
            }],
            type:[{
                label:'微信页面',
                value:'wx',
            }],
            url:[{
                label:'商品筛选页',
                value:'/pages/index/searchGoods',
            }]

        }
    }
})
/**
 * 头像列表预览
 */
Vue.component('avatar-text', {
    template: `<div :style="style">
    <div @click="handle" :style="style1">
        <div style="width: 80px;height: 80px; border: 2px solid #fff; border-radius: 50%; overflow: hidden;  flex-shrink: 0;">
            <el-image v-if="member.Image" style="width: 100%;height: 100%;" :src="member.Image"></el-image>
        </div>
        <div style="margin-left: 10px; width: 100%;display: flex; justify-content: center;flex-direction: column;">
            <span style="font-size: 15px; font-weight: 700; " class="text-ellipsis">{{member.Member_Nike}}</span>
            <span style="margin-top: 10px; font-size: 12px; color: #adadad;">{{member.Member_SerialNumber?'已绑定身份'+member.Member_SerialNumber:'暂未认证身份'}}</span>
        </div>
        <div style="flex-shrink: 0; font-size: 20px;">
            <i class="el-icon-arrow-right"></i>
        </div>
    </div></div>`,
    mixins: [global],//继承的方法
    data(){
        return {
            loading:false,
            member:{}
        }
    },
    computed: {
        style(){
            const {paddingTop, paddingRight, paddingBottom, paddingLeft} = this.data;
            return {
                padding:`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
               
            }
        },
        style1(){
            const {top, right, bottom, left,backgroundColor,borderRadius} = this.data;
            return {
                display: 'flex',
                alignItems: 'center',
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                backgroundColor,
                borderRadius:borderRadius+'px',
            }
        }
    },
    methods: {
        handle(){
            if (!this.loading) {
                this.loading = true;
                wx.miniProgram.navigateTo({
                    url: '/pages/my/information',
                    complete:()=>{
                        this.loading = false;
                    }
                })
            }
        },
        getData(Open_ID){
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber:'M_business_member_account_info',
					Condition:window.btoa(unescape(encodeURIComponent(Open_ID))),
					ExtensionCondition:''
                },
                success: function (data) {
                    if (data.length == 1) {
                        that.member = data[0]
                        console.log(that.member);
                    }
                },
                dataType: "json"
            })
        }
    },
    mounted() {
        this.getData(getQueryObject().Open_ID);
    }
})
/**
 * 头像列表配置
 */
Vue.component('avatar-config', {
    template: `<div>
    <div class="table_titel">
        <div class="titel">组件属性({{id}})</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="上边距">
    <el-input-number v-model="data.top" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
    <el-input-number v-model="data.bottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
    <el-input-number v-model="data.left" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
    <el-input-number v-model="data.right" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上内边距">
    <el-input-number v-model="data.paddingTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下内边距">
    <el-input-number v-model="data.paddingBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左内边距">
    <el-input-number v-model="data.paddingLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右内边距">
    <el-input-number v-model="data.paddingRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="角度">
    <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
    <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            DataSource: [{
                Title: '日常上架',
                SQLSerialNumber: 'M_business_daily_execute_unitprice',
            }, {
                Title: '活动商品',
                SQLSerialNumber: 'A_business_activity_article',
            }],
            activity: [],
        }
    },
    methods: {
    },
    mounted() {
        // this.getData();
    }
})
/**
 * 标题文本预览
 */
Vue.component('title-text',{
    template:`<div :id="id" :style="{margin}">
        <span :style="{color,fontWeight,fontSize}">{{Text}}</span>
    </div>`,
    mixins: [global],//继承的方法
    computed:{
        color(){
            return this.data.Color;
        },
        fontWeight(){
            return this.data.fontWeight;
        },
        fontSize(){
            return this.data.fontSize + 'px';
        },
        margin(){
            return `${this.data.top}px ${this.data.right}px ${this.data.bottom}px ${this.data.left}px`
        },
    },
    data(){
        return {
            Text:'',
        }
    },
    watch:{
        'data.Text'(val){
            this.getData();
        },
        'data.type'(){
            this.getData();
        }
    },
    methods:{
        getData(){
            if (this.data.type=='0') {//
                this.Text = this.data.Text
            } else if (this.data.type=='1') {
                this.Text = getQueryObject()[this.data.Text]
            }
        }
    },
    mounted(){
        this.getData()
    }
})
/**
 * 标题文本配置
 */
Vue.component('title-config',{
    template:`<div :id="id">
        <div class="table_titel">
            <div class="titel">标题属性({{id}})</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="字体颜色">
                <el-color-picker v-model="data.Color" show-alpha></el-color-picker>
            </el-descriptions-item>
            <el-descriptions-item label="字体粗细">
                <el-input-number v-model="data.fontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="字体大小">
                <el-input-number v-model="data.fontSize" :min="1"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="上边距">
                <el-input-number v-model="data.top" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下边距">
                <el-input-number v-model="data.bottom" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="左边距">
                <el-input-number v-model="data.left" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="下右边距">
                <el-input-number v-model="data.right" :min="0"></el-input-number>
            </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
            <div class="titel">标题文本</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="获取类型">
                <el-select v-model="data.type" clearable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item :label="label">
                <el-input v-model="data.Text" :placeholder="'请输入'+label"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </div>`,
    mixins: [global],//继承的方法
    data(){
        return {
            options:[{
                value:'0',
                label:'自定义'
            },{
                value:'1',
                label:'url传参获取'
            }]
        }
    },
    computed:{
        label(){
            if(this.data.type=='0'){
                return '文本文字'
            } else if (this.data.type == '1'){
                return 'url参数'
            }
        }
    }
})
/**
 * 浏览记录预览
 */
Vue.component('browsing-history-text', {
    template: `<div style="padding-top: 10px;">
    <div v-for="(i,id) in newData" :key="id">
        <div :style="DateStyle">
            <span :style="DateStyle1">浏览日期:{{i.Date}}</span>
        </div> 
        <div v-for="(item,index) in i.Children" :key="index" :style="CardStyle" >
            <div style="display: flex; align-items: center; width: 100%;">
                <div style="flex-shrink:0; overflow: hidden;">
                    <el-image :style="ImgStyle" :src="BASE_IMG + item.Picture_URL"></el-image>
                </div>
                <div :style="textStyle">
                    <span style="flex-shrink: 0; font-size: 16px; font-weight: 700;" class="text-ellipsis-2">{{item.Article_Name}}</span>
                    <span style="font-size: 12px; color: #828d96;">{{item.Specifications_Name}}</span>
                    <span style="font-size: 12px; color: #828d96;">{{item.Brand_Name}}</span>
                    <div style="width: 100%; align-items: end; margin-top: 10px;display: flex; justify-content: space-between;">
                       <span style="font-size: 16px; font-weight: 700;">￥{{item.Sales_Unit_Price}}</span>
                       <span style="font-size: 12px; color: #828d96;">浏览时间：{{item.Time}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>`,
    mixins: [global],
    data(){
        return {
            Data:[],
        }
    },
    computed: {
        newData(){
            let arr = [];
            this.Data.forEach(item => {
                let Date = item.Browsing_Date.split(' ')[0];
                let Time = item.Browsing_Date.split(' ')[1];
                if (arr.some(i=>i.Date == Date)) {
                    arr.filter(i=>i.Date == Date)[0].Children.push({...item,Time})
                } else {
                    arr.push({
                        Date,
                        Children:[{...item,Time}]
                    })
                }
            })
            return arr
        },
        DateStyle(){
            return {
                margin:'0 10px 10px 10px', 
                display:'flex',
                backgroundColor:'#fff', 
                borderRadius:'10px',
            }
        },
        DateStyle1(){
            return {
                padding: '10px 0', 
                marginLeft: '10px', 
                fontSize: '16px',
                fontWeight: 100,
                color:'#000'
            }
        },
        CardStyle(){
            return {
                margin:'0 10px 10px',
                borderRadius: '10px',
                backgroundColor: '#fff',
                alignItems: 'center',
                display: 'flex',
                alignItems: 'center'
            }
        },
        ImgStyle(){
            return {
                margin: '10px',
                width: '100px',
                height: '100px',
                borderRadius: '10px'
            }
        },
        textStyle(){
            return {
                display: 'flex',
                justifyContent: 'space-between',
                flexDirection: 'column',
                width: '100%',
                marginRight: '10px',
                height: '100px'
            }
        },
        style(){
            const {backgroundColor} = this.data;
            return {
                backgroundColor,
                width:'100%',
                position:'fixed',
                bottom:0,
                left:0,
                display:'flex',
                justifyContent:'space-around',
                alignItems:'center',
                boxShadow:'0px 1px 6px rgba(0, 0, 0, 0.15)'
            }
        },
    },
    watch:{
        '$store.state.transfer':{
            handler(val, oldVal) {
                if (oldVal[this.id] != val[this.id]) {
                    this.getData(getQueryObject().Open_ID);
                }
            },
            deep: true,
        }
    },
    methods: {
        handle(item, index) {
            if (this.tabId != index && item.url) {
                if (item.type == 'web') {
                    window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
                } else if (item.type = 'wx') {
                    wx.miniProgram.redirectTo({
                        url: item.url,
                        complete:()=>{
                            this.loading = false;
                        }
                    })
                }
            }
        },
        getData(Open_ID){
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber: "P_business_browsing_history",
                    Condition:'',
                    ExtensionCondition:  window.btoa(unescape(encodeURIComponent("AND business_browsing_history.Open_ID = '"+Open_ID+"'")))
                },
                success: function (data) {
                    that.Data = data
                    console.log(that.newData);
                },
                dataType: "json"
            })
        }
    },
    mounted(){
        this.getData(getQueryObject().Open_ID);
    }
})
/**
 * 浏览记录配置
 */
Vue.component('browsing-history-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">组件属性({{id}})</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="top">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入圆角弧度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件高度">
            <el-input-number v-model="data.height" :min="1" placeholder="请输入组件高度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-select filterable v-model="data.heightUnit" placeholder="请选择高度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" placeholder="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" placeholder="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" placeholder="请输入下边距"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            arrow: [{
                label: '一直显示',
                value: 'always',
            }, {
                label: '鼠标移入',
                value: 'hover',
            }, {
                label: '一直隐藏',
                value: 'never',
            }],
        }
    },
    methods: {
        add() {
            this.data.Children.image.push({
                Picture_URL: '',
                fit: 'contain',
                url:'',
                type:'',
            })
        },
        remove() {
            if (this.data.Children.image.length > 1) {
                this.data.Children.image.pop();
            } else {
                this.$message({
                    message: "不能再删除了",
                    type: 'warning'
                })
            }
        }
    },
})
/**
 * 参与活动预览
 */
Vue.component('activity-list-text', {
    template: `<div :style="style">
    <div :style="style1">
        共 <span :style="style2">{{activity.length}}</span> 个可参与活动
    </div>
    <div style="overflow: auto;">
        <div style="display: flex;">
            <div @click="handleSkip(item)" v-for="(item,index) in activity" :key="index" :style="style3">
                <div :style="style4">
                    <el-image :style="style5" :src="BASE_IMG+item.Picture_URL">
                        <div slot="error" class="el-image__error">
                            {{data.imageText}}
                        </div>
                    </el-image>
                    <div :style="style6">
                        <span class="text-ellipsis">{{item.Activity_Name}}</span>
                    </div>
                </div>
                <div :style="style7">
                    {{data.text1Text}}
                </div>
            </div>
        </div>
    </div></div>`,
    mixins: [global],
    data(){
        return {
            activity:[],
        }
    },
    computed: {
        style(){//组件样式
            const {backgroundColor,borderRadius,top,bottom,left,right,
                backgroundImage,backgroundSize,backgroundAttachment,backgroundRepeat} = this.data;
            let obj = {};
            if (backgroundImage) {
                obj = {
                    backgroundImage: `url(${BASE_IMG + backgroundImage})`,
                    backgroundSize:backgroundSize?backgroundSize:'auto',
                    backgroundRepeat
                }
            }
            if (backgroundAttachment) {
                obj.backgroundAttachment = 'fiexd'
            }
            return {
                display: 'flex',
                flexDirection: 'column',
                margin:`${top}px ${right}px ${bottom}px ${left}px`,
                backgroundColor,
                borderRadius: borderRadius +'px',
                ...obj
            }
        },
        style1(){//标题样式
            const { titleHeight,titleFontSize,titleFontWeight,titleColor,titleTop,titleRight,titleBottom,titleLeft } = this.data;
            return{
                height: titleHeight + 'px',
                lineHeight: titleHeight+'px',
                fontSize: titleFontSize+'px',
                fontWeight:titleFontWeight,
                color: titleColor,
                margin:`${titleTop}px ${titleRight}px ${titleBottom}px ${titleLeft}px`,
            }
        },
        style2(){//关键字样式
            const {title1FontSize,title1FontWeight,title1Color, } = this.data;
            return{
                color: title1Color,
                fontSize: title1FontSize + 'px',
                fontWeight: title1FontWeight,
            }
        },
        style3(){//卡片样式
            const {cardWidth,cardHeight,cardBackgroundColor,cardTop,cardRight,cardBottom,cardLeft,cardBorderRadius} = this.data;
            return {
                flexShrink: 0,
                display: 'flex',
                flexDirection: 'column',
                width: cardWidth + 'px',
                height: cardHeight + 'px',
                backgroundColor: cardBackgroundColor,
                margin:`${cardTop}px ${cardRight} ${cardBottom}px ${cardLeft}px`,
                borderRadius: cardBorderRadius + 'px',
                alignItems: 'center',
            }
        },
        style4(){//子卡片样式
            const {card1Width,card1Height,card1BackgroundColor,card1Top,card1Bottom,card1Left,card1Right,card1BorderRadius} = this.data;
            return {
                display: 'flex',
                flexDirection: 'column',
                width: card1Width +'px',
                height: card1Height + 'px',
                backgroundColor: card1BackgroundColor,
                borderRadius: card1BorderRadius + 'px',
                margin: `${card1Top}px ${card1Right}px ${card1Bottom}px ${card1Left}px`,
                alignItems: 'center',
                justifyContent: 'center'
            }
        },
        style5(){//图片样式
            const {imageWidth,imageHeight,imageBorderRadius} = this.data;
            return {
                flexShrink: 0,
                width: imageWidth + 'px',
                height: imageHeight + 'px',
                borderRadius: imageBorderRadius + 'px',
            }
        },
        style6(){//文字样式
            const {textLineHeight,textTop,textBottom,textLeft,textRight,textFontSize,textColor,textFontWeight} = this.data;
            return {
                height:textLineHeight+'px',
                display:'flex',
                margin:`${textTop}px ${textRight}px ${textBottom}px ${textLeft}px`,
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: textFontSize + 'px',
                color: textColor,
                fontWeight:textFontWeight
            }
        },
        style7(){//前往样式
            const {text1FontSize,text1Color,text1FontWeight} = this.data;
            return {
                fontSize: text1FontSize + 'px',
                display: 'flex',
                alignItems: 'center',
                fontWeight: text1FontWeight,
                color:text1Color,
            }
        }
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber: "M_business_activity",
                    Condition: window.btoa(unescape(encodeURIComponent(getQueryObject().Open_ID))),
                    ExtensionCondition: ''
                },
                success: function (data) {
                    that.activity = data
                },
                dataType: "json"
            })
        },
        handleSkip(item) {
            window.location.href = BASE_URL4 + '/' + item.Page_SerialNumber
                + '.html?Open_ID=' + getQueryObject().Open_ID + '&Activity_SerialNumber=' + item.Activity_SerialNumber + '&Activity_Name=' + item.Activity_Name;
        },
    },
    mounted() {
        this.getData();
    }
})
/**
 * 参与活动配置
 */
Vue.component('activity-list-config', {
    template: `<div style="background-color: white;">
    <div class="table_titel">
        <div class="titel">组件属性({{id}})</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="背景图片">
            <yl-upload unslider :base="BASE_IMG" v-model="data.backgroundImage"></yl-upload>
        </el-descriptions-item>
        <el-descriptions-item label="适应类型">
            <el-select style="width:100%" v-model="data.backgroundSize" clearable  placeholder="请选择适应类型">
                <el-option v-for="item in backSize" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="是否固定">
            <el-switch v-model="data.backgroundAttachment" active-text="是" inactive-text="否"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否重复">
            <el-select style="width:100%" v-model="data.backgroundRepeat" clearable placeholder="请选择适应类型">
                <el-option v-for="item in repeat" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="圆角">
            <el-input-number v-model="data.borderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">标题</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="标题高度">
            <el-input-number v-model="data.titleHeight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.titleFontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体颜色">
            <el-color-picker v-model="data.titleColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.titleFontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.titleTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.titleBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.titleLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.titleRight" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">标题关键字</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.title1FontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.title1FontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体颜色">
            <el-color-picker v-model="data.title1Color" show-alpha></el-color-picker>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">卡片样式</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="卡片宽度">
            <el-input-number v-model="data.cardWidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="卡片高度">
            <el-input-number v-model="data.cardHeight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker v-model="data.cardBackgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.cardTop" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.cardBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.cardLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.cardRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="圆角">
            <el-input-number v-model="data.cardBorderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">嵌套卡片样式</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="卡片宽度">
            <el-input-number v-model="data.card1Width" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="卡片高度">
            <el-input-number v-model="data.card1Height" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="背景颜色">
            <el-color-picker v-model="data.card1BackgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.card1Top"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.card1Bottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.card1Left" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.card1Right" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="圆角">
            <el-input-number v-model="data.card1BorderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">活动图片样式</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="图片宽度">
            <el-input-number v-model="data.imageWidth" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图片高度">
            <el-input-number v-model="data.imageHeight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="圆角">
            <el-input-number v-model="data.imageBorderRadius" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="加载失败文字">
            <el-input v-model="data.imageText"></el-input>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">活动名称样式</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="文字间距">
            <el-input-number v-model="data.textLineHeight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文字颜色">
            <el-color-picker v-model="data.textColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.textTop"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.textBottom" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.textLeft" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.textRight" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.textFontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.textFontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">底部文字样式</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="字体大小">
            <el-input-number v-model="data.text1FontSize" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="字体粗细">
            <el-input-number v-model="data.text1FontWeight" :step="100" step-strictly :min="100" :max="800"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="文字颜色">
            <el-color-picker v-model="data.text1Color" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="底部文字">
            <el-input v-model="data.text1Text"></el-input>
        </el-descriptions-item>
    </el-descriptions>
</div>`,
    mixins: [globalConfig],//继承的方法
    data() {
        return {
            arrow: [{
                label: '一直显示',
                value: 'always',
            }, {
                label: '鼠标移入',
                value: 'hover',
            }, {
                label: '一直隐藏',
                value: 'never',
            }],
        }
    },
    methods: {
        add() {
            this.data.Children.image.push({
                Picture_URL: '',
                fit: 'contain',
                url:'',
                type:'',
            })
        },
        remove() {
            if (this.data.Children.image.length > 1) {
                this.data.Children.image.pop();
            } else {
                this.$message({
                    message: "不能再删除了",
                    type: 'warning'
                })
            }
        }
    },
})
/**
 * 底部导航栏预览
 */
Vue.component('tab-bar-text', {
    template: `<div :id="id" :style="{height}" style="flex-shrink: 0;z-index:999 ;">
    <div :style="{height,...style}">
        <div @click="handle(item,index)" :style="itemStyle" v-for="(item,index) in data.list" :key="index">
            <i v-if="item.text=='购物车' && shopNum > 0" :style="toolStyle" >{{ shopNum }}</i>
            <el-image :style="iconStyle" :src="data.tabId==index?BASE_ICON+item.selectedIcon:BASE_ICON+item.icon"></el-image>
            <span :style="fontStyle(index)">{{item.text}}</span>
        </div>                                 
    </div></div>`,
    mixins: [global],
    data(){
        return {
            loading:false,
            shopNum:0,
        }
    },
    computed: {
        style(){
            const {backgroundColor} = this.data;
            return {
                backgroundColor,
                width:'100%',
                position:'fixed',
                bottom:0,
                left:0,
                display:'flex',
                justifyContent:'space-around',
                alignItems:'center',
                boxShadow:'0px 1px 6px rgba(0, 0, 0, 0.15)'
            }
        },
        itemStyle(){
            const {} = this.data;
            return {
                position: 'relative',
                display: 'flex',
                flexDirection:'column',
                alignItems: 'center'
            }
        },
        iconStyle(){
            return {
                width:'30px',
                height:'30px',
                borderRadius:'10px'
            }
        },
        fontStyle(){
            return function (index){
                const {color,selectedColor,fontSize,tabId} = this.data;
                return {
                    color:tabId==index?selectedColor:color,
                    fontSize:fontSize + 'px',
                }
            }
        },
        toolStyle(){
            return {
                fontStyle:'normal',
                zIndex:1,
                position: 'absolute',
                backgroundColor:'#dc3545',
                fontSize: '12px',
                color: '#fff',
                borderRadius:'50px',
                padding: '0 5px',
                top: '-2.5px',
                left: '-2.5px'
            }
        },
        height() {
            return this.data.height + this.data.heightUnit
        }
    },
    watch:{
        '$store.state.transfer':{
            handler(val, oldVal) {
                if (oldVal[this.id] != val[this.id]) {
                    this.getData(getQueryObject().Open_ID);
                }
            },
            deep: true,
        }
    },
    methods: {
        handle(item, index) {
            if (this.tabId != index && item.url) {
                if (item.type == 'web') {
                    window.location.href = BASE_URL4 + item.url + '?Open_ID=' + getQueryObject().Open_ID;
                } else if (item.type = 'wx') {
                    wx.miniProgram.redirectTo({
                        url: item.url,
                        complete:()=>{
                            this.loading = false;
                        }
                    })
                }
            }
        },
        getData(Open_ID){
            const that = this;
            $.ajax({
                url: `${BASE_URL2}/salesOrder/queryShoppingTrolleyBySQLSerialNumber`,
                type: 'POST',
                data: {
                    SQLSerialNumber: "M_business_shopping_trolley_Quantity",
                    Condition: window.btoa(unescape(encodeURIComponent(Open_ID))),
                    ExtensionCondition: ''
                },
                success: function (data) {
                    console.log(data);
                    if (data.length==1) {
                        that.shopNum = data[0].Quantity
                    }
                },
                dataType: "json"
            })
        }
    },
    mounted(){
        this.getData(getQueryObject().Open_ID);
    }
})
/**
 * 底部导航栏配置
 */
Vue.component('tab-bar-config', {
    template: `<div>
    <div class="table_titel">
        <div class="titel">组件属性({{id}})</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="背景颜色">
            <el-color-picker v-model="data.backgroundColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="文字颜色">
            <el-color-picker v-model="data.color" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="选中文字颜色">
            <el-color-picker v-model="data.selectedColor" show-alpha></el-color-picker>
        </el-descriptions-item>
        <el-descriptions-item label="所属导航项">
            <el-input-number v-model="data.tabId" :min="0" placeholder="请输入上外边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度">
            <el-input-number v-model="data.height" :min="0" placeholder="请输入高度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-select filterable v-model="data.heightUnit" placeholder="请选择高度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">导航栏目</div>
        <div class="operation">
            <el-button type="text" size="small" @click="add">新增</el-button>
            <el-button type="text" size="small" @click="remove">删除</el-button>
        </div>
    </div>
    <el-descriptions :column="2" border size="small" v-for="(item,index) in data.list" :key="index">
        <el-descriptions-item label="跳转类型">
            <el-select style="width:100%" v-model="item.type" placeholder="请选择跳转类型">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="跳转页面">
            <el-input v-model="item.url" placeholder="请输入跳转页面"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="图标">
            <yl-upload v-model="item.icon" :base="BASE_IMG"></yl-upload>
        </el-descriptions-item>
        <el-descriptions-item label="选中图标">
            <yl-upload v-model="item.selectedIcon" :base="BASE_IMG"></yl-upload>
        </el-descriptions-item>
        <el-descriptions-item label="栏目标题">
            <el-input v-model="item.text" placeholder="请输入栏目标题"></el-input>
        </el-descriptions-item>
    </el-descriptions></div>`,
    mixins: [globalConfig],
    data(){
        return {
            type:[{
                label:'微信页面',
                value:'wx',
            },{
                label:'低代码页面',
                value:'web',
            }],
            url:[{
                label:'首页',
                value:'/P00000000000027.html',
            },{
                label:'分类',
                value:'/pages/index/classify',
            },{
                label:'购物车',
                value:'/pages/index/shopCart',
            },{
                label:'我的',
                value:'/P00000000000028.html',
            }]
        }
    },
    methods: {
        add() {
            this.data.list.push({
                Path: '',
                text: '',
                icon: '',
                selectedIcon: '',
            })
        },
        remove() {
            if (this.data.list.length > 1) {
                this.data.list.pop();
            } else {
                this.$message({
                    message: "不能再删除了",
                    type: 'warning'
                })
            }
        }
    },
    mounted(){
        console.log(this.getPage('web'));
        
    }
})
/**
 * 菜单栏预览
 */
Vue.component('menu-text', {
    template: `<el-menu mode="horizontal" @select="handleSelect">
        <menu-item :data="item" :index="index+1+''" v-for="(item,index) in data.list" :key="index"></menu-item>
    </el-menu>`,
    props: ['data', 'index'],
    methods: {
        handleSelect(e) {
            console.log(e);
        },

    },
})
Vue.component('menu-item', {
    template: `<component :is="data.Children&&data.Children.length > 0?'el-submenu':'el-menu-item'" :index="index">
        <template slot="title">
            <i :class="data.icon"></i>
            <span>{{data.title}}</span>
        </template>
        <template v-if="data.Children&&data.Children.length > 0">
            <menu-item :data="item" :index="index+'-'+(id+1)" v-for="(item,id) in data.Children" :key="id"></menu-item>
        </template>
    </component>`,
    props: ['data', 'index'],
    mounted(){
        this.$children[0].$parent = this.$parent
    }
})
/**
 * 菜单栏配置
 */

